<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<style type="text/css">
    div {
        width: 180px;
        height: 50px;
        background: white;
        border: red 1px solid;
    }
</style>

<body>
<input type="button" value="含有属性class的div元素背景色为红色" id="b1"/>
<br><br>

<input type="button" value="含有属性class='马云'的div元素背景色为红色" id="b2"/>
<br><br>

<input type="button" value="含有属性class值以'马'开头的div元素背景色为红色" id="b3"/>
<br><br>

<input type="button" value="含有属性class值以'马'结尾的div元素背景色为红色" id="b4"/>
<br><br>

<input type="button" value="含有属性class值包含'马'的div元素背景色为红色" id="b5"/>
<br><br>

<input type="button" value="含有属性id='div5'且class='div5'的div元素背景色为红色" id="b6"/>
<br><br>

<div>我是div</div>
<div id="div1" class="马云">我是div1 马云</div>
<div id="div2" class="马化腾">我是div2 马化腾</div>
<div id="div3" class="小马哥">我是div3 小马哥</div>
<div id="div4" class="老马">我是div4 老马</div>
<div id="div5" class="div5">我是div5</div>
</body>
</html>
<script type="text/javascript">
    $("#b1").click(function () {
        $("div[class]").css("background-color","green");
    })
    $("#b2").click(function () {
        $("div[class='马云']").css("background-color","red");
    })
    $("#b3").click(function () {
        $("div[class^='马']").css("background-color","red");
    })
    $("#b4").click(function () {
        $("div[class$='马']").css("background-color","red");
    })
    $("#b5").click(function () {
        $("div[class*='马']").css("background-color","red");
    })
    $("#b6").click(function () {
        $("div[id='div5'][class='div5']").css("background-color","red");
    })
</script>